<template>
  <div class="content">
    <div class="niv">
      <div class="niv-title">当前位置:</div>
      <el-breadcrumb class="niv1" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>教师库</el-breadcrumb-item>
        <el-breadcrumb-item>教师详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="card">
      <el-card class="box-card">
        <div class="card-left">
          <img class="img" src="teacher_w.png" alt="" />
        </div>
        <div class="card-right">
          <div class="card-right-1">
            <div class="card-right-1-left">
              <div class="card-right-1-left-h"><h1>王老师</h1></div>
              <div class="card-right-1-left-v">
                <a href=""></a>
                <img src="/v4.png" alt="" />
              </div>
              <div class="card-right-1-left-v">
                <a href=""></a>
                <img src="/gold.png" alt="" />
              </div>
              <div class="card-right-1-left-p">
                <el-rate
                  v-model="value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </div>
              <div class="card-right-1-right-1">
                <img
                  src="/erweima.jpg"
                  alt=""
                  width="90px"
                  height="90px"
                />
                <div>添加老师微信，即可预约</div>
              </div>
              <div class="card-right-1-right-2">
                <span class="card-right-1-right-2-z"
                  ><strong>￥300</strong></span
                >
                <span>/1.5h</span>
              </div>
            </div>
          </div>
          <el-descriptions
            class="card-right-2"
            :column="2"
            labelStyle="font-weight:700"
          >
            <el-descriptions-item label="性别">女</el-descriptions-item>
            <el-descriptions-item label="教师编号"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="毕业学校"
              >清华大学</el-descriptions-item
            >
            <el-descriptions-item label="学历"> </el-descriptions-item>
            <el-descriptions-item label="出生年月"></el-descriptions-item>
            <el-descriptions-item label="来自省份"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="目前身份"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="教学年限"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="登录时间"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="住址"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="证书"
              >kooriookami</el-descriptions-item
            >
          </el-descriptions>
          <div class="card-right-3">
            <el-row>
              <el-button @click="ShowLogin" class="sc">
                <img :src="scSrc" alt="" class="loginpic" />
                {{ a }}
              </el-button>
              <el-button type="warning" plain @click="bx">加入备选</el-button>
              <el-button type="warning" plain @click="zx">立即咨询</el-button>
              <el-button class="yy"
                ><router-link to="/">在线预约</router-link></el-button
              >
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="教师详情" name="first">
          <div class="tabs-list">
            <h1>可教授科目:</h1>
            <h2>初一初二语文 初三语文</h2>
          </div>
          <div class="tabs-list">
            <h1>自我特色:</h1>
            <h2>
              大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
              有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！
            </h2>
          </div>
          <div class="tabs-list">
            <h1>可授课区域：</h1>
            <h2>无要求</h2>
          </div>
          <div class="tabs-list">
            <h1>可辅导方式：</h1>
            <h2>老师上门、在线授课、机构授课</h2>
          </div>
          <div class="tabs-list">
            <h1>详细描述：</h1>
            <h2></h2>
          </div>
          <div class="tabs-list">
            <h1>所获证书：</h1>
            <h2>英语四级六级</h2>
          </div>
          <div class="tabs-list">
            <h1>家教简历：</h1>
            <h2>
              工作经验:
              1、在大学顶岗实习期间获得石家庄区域顶岗实习微课决赛特等奖
              2、自2018.5至2021.9，在河北省石家庄市某县培训机构工作，三年来寒暑假及周六日一直都在一线教学，担任小学奥数教师，以及初中数学教师，所教学生成绩优异为学校年级佼佼者，有丰富的教学经验。目前手里有丰厚的分题型的奥数教学资料，以及中学教学教案。
            </h2>
          </div>
        </el-tab-pane>
        <el-tab-pane label="成功案例" name="second">成功案例</el-tab-pane>
        <el-tab-pane label="家长评价" name="third">家长评价</el-tab-pane>
        <el-tab-pane label="推荐教师" name="fourth">
          <div class="tea_reco">
            <div class="tea_reco_left">
              <img src="/teacher_w.png" alt="" />
            </div>
            <div class="tea_reco_right">
              <div class="tea_reco_right_1">
                <h1>王老师</h1>
                <div>
                  <img src="/v4.png" alt="" />
                  <img src="/gold.png" alt="" />
                </div>
                <span>女</span>
                <span>教师编号：beijing50110</span>
                <span>注册时间：2021-09-23</span>
                <h2><i>￥300</i>/1.5小时</h2>
              </div>
              <div class="tea_reco_right_2">
                <div>
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                  <span>4年教龄</span>
                  <span>清华大学</span>
                </div>
              </div>
              <div class="tea_reco_right_3">
                <span
                  >大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
                  有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！</span
                >
              </div>
              <div class="tea_reco_right_4">
                <span></span>
                <div>
                  <el-button type="warning" plain>查看详情</el-button>
                  <el-button type="warning">预约</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="tea_reco">
            <div class="tea_reco_left">
              <img src="/teacher_w.png" alt="" />
            </div>
            <div class="tea_reco_right">
              <div class="tea_reco_right_1">
                <h1>王老师</h1>
                <div>
                  <img src="/v4.png" alt="" />
                  <img src="/gold.png" alt="" />
                </div>
                <span>女</span>
                <span>教师编号：beijing50110</span>
                <span>注册时间：2021-09-23</span>
                <h2><i>￥300</i>/1.5小时</h2>
              </div>
              <div class="tea_reco_right_2">
                <div>
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                  <span>4年教龄</span>
                  <span>清华大学</span>
                </div>
              </div>
              <div class="tea_reco_right_3">
                <span
                  >大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
                  有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！</span
                >
              </div>
              <div class="tea_reco_right_4">
                <span></span>
                <div>
                  <el-button type="warning" plain>查看详情</el-button>
                  <el-button type="warning">预约</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="tea_reco">
            <div class="tea_reco_left">
              <img src="/teacher_w.png" alt="" />
            </div>
            <div class="tea_reco_right">
              <div class="tea_reco_right_1">
                <h1>王老师</h1>
                <div>
                  <img src="/v4.png" alt="" />
                  <img src="/gold.png" alt="" />
                </div>
                <span>女</span>
                <span>教师编号：beijing50110</span>
                <span>注册时间：2021-09-23</span>
                <h2><i>￥300</i>/1.5小时</h2>
              </div>
              <div class="tea_reco_right_2">
                <div>
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                  <span>4年教龄</span>
                  <span>清华大学</span>
                </div>
              </div>
              <div class="tea_reco_right_3">
                <span
                  >大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
                  有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！</span
                >
              </div>
              <div class="tea_reco_right_4">
                <span></span>
                <div>
                  <el-button type="warning" plain>查看详情</el-button>
                  <el-button type="warning">预约</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="tea_reco">
            <div class="tea_reco_left">
              <img src="/teacher_w.png" alt="" />
            </div>
            <div class="tea_reco_right">
              <div class="tea_reco_right_1">
                <h1>王老师</h1>
                <div>
                  <img src="/v4.png" alt="" />
                  <img src="/gold.png" alt="" />
                </div>
                <span>女</span>
                <span>教师编号：beijing50110</span>
                <span>注册时间：2021-09-23</span>
                <h2><i>￥300</i>/1.5小时</h2>
              </div>
              <div class="tea_reco_right_2">
                <div>
                  <el-rate
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                  <span>4年教龄</span>
                  <span>清华大学</span>
                </div>
              </div>
              <div class="tea_reco_right_3">
                <span
                  >大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
                  有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！</span
                >
              </div>
              <div class="tea_reco_right_4">
                <span></span>
                <div>
                  <el-button type="warning" plain>查看详情</el-button>
                  <el-button type="warning">预约</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="success">成功案例</div>
    <div class="success">家长评价</div>
    <div class="teacher-list"  v-for="(k,i) in teacherData" :key=i>
      <div class="tea_reco">
        <div class="tea_reco_left">
          <img src="/teacher_w.png" alt="" />
        </div>
        <div class="tea_reco_right tea_reco_right_down">
          <div class="tea_reco_right_1">
            <h5>{{k.name}}</h5>
            <div>
              <img src="/v4.png" alt="" />
              <img src="/gold.png" alt="" />
            </div>
            <span>{{k.teacherNum}}</span>
            <span>教师编号：{{k.name}}</span>
            <span>注册时间：{{k.name}}</span>
            <h2><i>￥300</i><span>/1.5小时</span></h2>
          </div>
          <div class="tea_reco_right_2">
            <div>
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
              <span>4年教龄</span>
              <span>清华大学</span>
            </div>
          </div>
          <div class="tea_reco_right_3">
            <span>{{k.text}}</span>
          </div>
          <div class="tea_reco_right_4" >
            <span></span>
            <div class="tea_reco_right_4_down">
              <el-button type="warning" plain>查看详情</el-button>
              <el-button type="warning">预约</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teacherData:[
        {
          name:'王老师',
          sex:'女',
          teacherNum:'beijing50110',
          regiestTime:'2021-09-23',
          money:'300',
          text:'大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。 有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！'
        },
        {
          name:'王老师',
          sex:'男',
          teacherNum:'beijing50110',
          regiestTime:'2021-09-23',
          money:'100',
          text:'高考英语145，现在还没有考专四专八，但是在校成绩较好，语音语法获得免修资格'
        },
        {
          name:'崔老师',
          sex:'女',
          teacherNum:'beijing50110',
          regiestTime:'2021-09-23',
          money:'100',
          text:'高考成绩语文119 数学108 英语116'
        },
        {
          name:'毛老师',
          sex:'女',
          teacherNum:'beijing50110',
          regiestTime:'2021-09-23',
          money:'100',
          text:'多次获得三好学生、优秀学生奖项 高考语文130/150；英语139/150 大学期间获得综合二等、三等奖学金；以及校级优秀学生称号'
        }
      ],
      activeName: "first",
      value: 3.7,
      isLogin: "",
      visible: false,
      scSrc: "/diloginhert.png",
      a: "收藏",
    };
  },
  methods: {
    ShowLogin(){
      this.$store.commit('ShowLogin',true)
    },
    zx() {
      this.$alert("联系电话：18802437010");
    },
    bx() {
      this.$message({
        message: "已加入备选",
        center: true,
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    dlClick(tab, event) {
      console.log(tab, event);
    },
    checkLogin() {
      if (this.scSrc == "/loginhert.png") {
        this.scSrc = "/diloginhert.png";
        this.a = "收藏";
        this.$message({
          message: "取消收藏",
          center: true,
        });
      } else {
        if (this.isLogin) {
          console.log("已登录");
          this.a = "已收藏";
          this.$message({
            message: "已收藏",
            center: true,
          });
          this.scSrc = "/loginhert.png";
        } else {
          this.visible = true;
          console.log("未登录");
        }
      }
    },
  },
};
</script>

<style scoped>
.tea_reco_right_4_down{
  float: right;
}
.tea_reco_right_down{
  padding-left: 30px;
}
.teacher-list{
  width:100%;
}

.success {
  margin-top: 50px;
  font-size: 22px;
  margin-bottom: 20px;
  min-height: 100px;
  background-color: #fff;
}
.tea_reco_right_3 {
  height: 40px;
  width: 100%;
  margin-top: 10px;
}
.tea_reco_right_4 span {
  width: 660px;
  height: 40px;
  float: left;
  padding-top: 8px;
  overflow: hidden;
}

.tea_reco_right_3 {
  color: #666;
  line-height: 22px;
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-left: 28px;
}
.tea_reco_right_2 span {
  margin-left: 28px;
}
.tea_reco_right_2 div {
  white-space: nowrap;
  display: inline-block;
}
.tea_reco_right_2 {
  height: 25px;
  line-height: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 28px;
  white-space: nowrap;
}
.tea_reco_right_1 h2 i {
  color: #ff8000;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
}
.tea_reco_right_1 div {
  display: inline-block;
  white-space: nowrap;
}
.tea_reco_right_1 span {
  font-size: 12px;
  margin-left: 28px;
  white-space: nowrap;
}
.tea_reco_right_1 {
  width: 100%;
  height: 40px;
  display: flex;
  text-align: center;
  line-height: 20px;
}
.tea_reco {
  height: 213px;
  display: flex;
  padding: 20px 0;
  width: 100%;
  border-bottom: 1px dashed #e6e6e6;
}
.tea_reco_right {
  width: 80%;
  height: 172px;
}
.tea_reco_left {
  width: 20%;
  height: 172px;
}
.tea_reco_left img {
  width: 80%;
  height: 172px;
}
.yy a {
  color: #fff;
}
.yy {
  border-color: #ff8000;
  background-image: linear-gradient(90deg, #ff5a00, #ffa500);
  font-weight: bold;
}
.sclogin-3-text {
  margin-top: 20px;
  margin-right: -50px;
}
.sclogin-3-button {
  width: 305px;
  height: 44px;
  margin-top: -15px;
  margin-right: -50px;
  background: -webkit-gradient(
    linear,
    100% 0%,
    0% 0%,
    from(#f3b13d),
    to(#ee7f30)
  );
}
.el-input__inner {
  border-radius: 20px;
}
.scdialog {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
.sclogin {
  width: 650px;
  height: 395px;
}
.sclogin-1 {
  float: right;
  width: 650px;
  height: 395px;
  position: absolute;
  right: 16px;
  top: 60px;
}
.sclogin-2 {
  width: 305px;
  float: right;
  position: absolute;
  right: 60px;
  top: 100px;
}
.sclogin-3 {
  float: left;
  clear: both;
  position: absolute;
  right: 48px;
  top: 270px;
}

.sc {
  width: 100px;
  height: 40px;
}
.loginpic {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: -5px;
  margin-right: 5px;
}
.content {
  width: 1200px;
  margin: 2px auto;
  padding: 20px 30px;
  min-height: 700px;
  background-color: #ee7f30;
  border-radius: 10px;
  margin-bottom: 30px;
}
.niv {
  width: 264px;
  height: 60px;
  display: flex;
}
.niv-title {
  height: 60px;
  margin-top: 22px;
  margin-right: 10px;
  font-size: 16px;
}
.niv1 {
  margin-top: 9%;
}

.card-right-1-left-h {
  float: left;
}
.card-right-1-left-v {
  float: left;
  margin-top: 20px;
  margin-left: 15px;
}
.card-right-1-left-x {
  float: left;
}
.card-right-1-left-p {
  display: inline;
  float: left;
  clear: both;
  width: 100%;
}
.card-right-1-right-1 {
  float: right;
  margin-right: 100px;
  margin-top: -74px;
}
.card-right-1-right-2-z {
  font-size: 18px;
  color: #ff8000;
}
.card-right-1-right-2 {
  margin-right: -241px;
  float: right;
  margin-top: -34px;
  padding-right: 50px;
}
.card-right-1{
  width: 728px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.img {
  width: 372px;
  height: 372px;
}
.card{
width: 100%;
display: flex;
}
.card-left {
  width: 40%;
  height: 457px;
  float: left;
}
.card-right {
  width: 60%;
  float: right;
}
.card-right-2 {
  width: 728px;
  height: 217px;
  margin-top: 30px;
}
.el-descriptions__body
  .el-descriptions__table
  .el-descriptions-item__cell {
  box-sizing: border-box;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px;
  background: rgb(245, 245, 245);
}
.card-right-3 {
  float: left;
  margin-left: 0px;
  margin-top: 160px;
}
.tabs {
  margin-top: 10px;
  text-align: left;
  background-color: #fff;
}
.tabs-list {
  margin-top: 22px;
  padding-bottom: 20px;
}
.tabs h1 {
  font-weight: bold;
  width: 108px;
  text-align: right;
  float: left;
  line-height: 8px;
  font-size: 100%;
}
.tabs h2 {
  width: 990px;
  float: left;
  line-height: 24px;
  padding-left: 10px;
  font-size: 100%;
  font-weight: normal;
}
</style>